<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { Config } from "./index";
const { t } = useI18n();
const props = withDefaults(defineProps<Props>(), {
  /**元素挂载位置 */
  teleport: "body",
  /**过渡标签name名 */
  transition: undefined,
});
const config = ref<Config>(initConfig());
defineExpose({ config, open, close });
const emit = defineEmits([
  "ok-btn",
  "no-btn",
  "open",
  "close",
  "opened",
  "closed",
]);
/**打开弹窗 */
function open(cfg?: Partial<Config>) {
  config.value = { ...initConfig(), ...cfg };
  config.value.show = true;
}

function initConfig(): Config {
  return {
    show: false,
    /**禁用确定按钮 */
    disabledOkBtn: false,
    /**禁用取消按钮 */
    disabledNoBtn: false,
    /**显示返回按钮 */
    showBack: false,
    /**显示取消按钮 */
    showNoBtn: true,
    /**显示确定按钮 */
    showOkBtn: true,
    /**取消按钮文本 */
    noBtnText: t("qu-xiao"),
    /**确定按钮文本 */
    okBtnText: t("que-ding"),
    /**是否允许点击遮罩关闭 */
    overlayclose: true,
    /**标题 */
    title: "hello",
    /**宽度 */
    width: undefined,
    /**是否展示遮罩层 */
    showOverlay: true,
    zIndex: undefined,
    /**关闭前执行 */
    /**是否在页面退回时自动关闭 */
    backClose: false,
  };
}
/**关闭弹窗 */
function close() {
  config.value.show = false;
}
interface Props {
  /**元素挂载位置 */
  teleport?: string;
  /**关闭前执行 */
  beforeClose?: (action: string) => boolean | Promise<boolean>;
  /**过渡标签name名 */
  transition?: string;
}

const slot = useSlots();
</script>

<template>
  <van-dialog
    class="Dialog"
    v-model:show="config.show"
    :title="config.title"
    :cancel-button-text="config.noBtnText"
    :show-cancel-button="config.showNoBtn"
    :teleport="props.teleport"
    :transition="props.transition"
    :width="config.width"
    :overlay="config.showOverlay"
    :close-on-click-overlay="config.overlayclose"
    :before-close="beforeClose"
    :confirm-button-disabled="config.disabledOkBtn"
    :cancel-button-disabled="config.disabledNoBtn"
    :z-index="config.zIndex"
    :close-on-popstate="config.backClose"
    @confirm="emit('ok-btn')"
    @cancel="emit('no-btn')"
    @open="emit('open')"
    @opened="emit('opened')"
    @close="emit('close')"
    @closed="emit('closed')"
  >
    <template #title>
      <!-- 顶部插槽 -->
      <slot name="header">
        <div class="Dialog_header">
          <van-icon
            @click="$router.back()"
            v-show="config.showBack"
            class="Dialog_back active"
            name="revoke"
          />
          <h3>{{ config.title || "hello" }}</h3>
          <van-icon @click="close" class="Dialog_close active" name="close" />
        </div>
      </slot>
    </template>
    <div class="Dialog_content">
      <slot></slot>
    </div>
    <!-- 底部插槽 -->
    <template #footer>
      <van-divider style="margin: 0 var(--gap-md)" />
      <div class="Dialog_footer">
        <slot name="footer">
          <div class="Dialog_footer_btn-box">
            <van-button
              v-if="config.showOkBtn"
              @click="emit('ok-btn')"
              type="primary"
            >
              {{ config.okBtnText }}
            </van-button>
            <van-button
              v-if="config.showNoBtn"
              @click="emit('no-btn')"
              type="primary"
            >
              {{ config.noBtnText }}
            </van-button>
          </div>
          <!-- 底部的底部 -->
          <div v-if="slot.footer_footer" style="margin-top: var(--gap-sm)">
            <slot name="footer_footer"></slot>
          </div>
        </slot>
      </div>
    </template>
  </van-dialog>
</template>

<style lang="less" scoped>
.Dialog {
  position: relative;
  .Dialog_header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .Dialog_back {
    position: absolute;
    left: var(--gap-md);
    font-size: 40rem;
  }
  .Dialog_close {
    position: absolute;
    right: var(--gap-md);
    font-size: 40rem;
  }

  .Dialog_content {
    position: relative;
    padding: var(--gap-md);
  }
  .Dialog_footer {
    padding: var(--gap-md);
    .Dialog_footer_btn-box {
      display: flex;
      justify-content: space-around;
      & > * + * {
        margin-left: 15%;
      }
    }
    .van-button {
      padding: var(--gap-md);
      flex: 1;
    }
  }
}
</style>
